<template>
  <div>
    <el-form
      label-position="right"
      label-width="120px"
      :model="form"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="头图" prop="topUrl">
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('topUrl')"
        >
          <img v-if="form.topUrl" :src="form.topUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('topUrl')" :url="form.topUrl"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片建议分辨率为16:9的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="介绍图" prop="descUrl">
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('descUrl')"
        >
          <img v-if="form.descUrl" :src="form.descUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('descUrl')" :url="form.descUrl"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片建议分辨率为16:9的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="介绍文案" prop="desc">
        <el-input
          v-model="form.desc"
          style="max-width: 880px"
          type="textarea"
          rows="12"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系地址" prop="address">
        <el-input
          v-model="form.address"
          style="max-width: 480px"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-divider class="divider divideTop"></el-divider>
      <div class="editList">
        <el-row>
          <el-col :span="4"  class="editListHeaderItem">联系方式类型</el-col>
          <el-col :span="4"  class="editListHeaderItem">标题</el-col>
          <el-col :span="4" class="editListHeaderItem">联系方式</el-col>
          <el-col :span="4" class="editListHeaderItem"><el-button type="primary" @click="form.contactList.push({type: '', name: '', contact: ''})">新增联系方式</el-button></el-col>
        </el-row>
        <el-row v-for="(item, index) in form.contactList" :key="index">
          <el-col :span="4"><div class="editListItemInput"><el-input v-model="item.type"></el-input></div></el-col>
          <el-col :span="4"><div class="editListItemInput"><el-input v-model="item.name"></el-input></div></el-col>
          <el-col :span="4"><div class="editListItemInput"><el-input v-model="item.contact"></el-input></div></el-col>
          <el-col :span="4"><div class="editListItemInput"><el-button @click="form.contactList.splice(index,1)">删除</el-button></div></el-col>
        </el-row>
      </div>
      <el-divider class="divider divideTop"></el-divider>
      <!-- <div class="editList">
        <el-row>
          <el-col :span="4"  class="editListHeaderItem">合作伙伴名称</el-col>
          <el-col :span="4"  class="editListHeaderItem">URL</el-col>
          <el-col :span="4" class="editListHeaderItem"><el-button type="primary" @click="form.cooperationList.push({type: '', name: '', contact: ''})">新增合作伙伴</el-button></el-col>
        </el-row>
        <el-row v-for="(item, index) in form.cooperationList" :key="index">
          <el-col :span="4"><div class="editListItemInput"><el-input v-model="item.name"></el-input></div></el-col>
          <el-col :span="4"><div class="editListItemInput"><el-input v-model="item.url"></el-input></div></el-col>
          <el-col :span="4"><div class="editListItemInput"><el-button @click="form.cooperationList.splice(index,1)">删除</el-button></div></el-col>
        </el-row>
      </div> -->
      <!-- <el-divider class="divider divideTop"></el-divider> -->
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getUploadToken, uploadUrl } from "@/util/upload";
import wangEditor from "wangeditor";
import rules from "@/config/rules";

export default {
  props: ["originForm"],
  data() {
    return {
      // 上传相关
      uploadData: {  },
      uploadUrl,
      form: {},
      rules,
    };
  },
  methods: {
    handleSubmit() {
      const { form } = this;
      const ajaxType = "post";
      const url =  "/api/plat/setting.json";
      console.log(this.form)
      const params = {
        key: 'cooperationManageData',
        value: JSON.stringify(this.form)
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios[ajaxType](url, params).then((response) => {
            this.$message.success("提交成功");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAvatarSuccess(name, res, file) {
      const fileName = name;
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);;
        this.form[fileName] = fileObj.url;
        this.form = JSON.parse(JSON.stringify(this.form));
      };
    },
    beforeAvatarUpload(file) {
      return getUploadToken(file.name).then((res) => {
        this.uploadData.token = res.ticket;
      });
    },
  },
  created() {
    this.form = this.originForm;
  },
  mounted() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.editTop {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  margin-left: 20px;
  button {
    margin-right: 10px;
  }
}
.footer {
  display: flex;
  justify-content: center;
}
.divideTop {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 146px;
  height: 146px;
  display: block;
  overflow: hidden;
}
.editList {
  margin-left: 40px;
}
.editListItemInput {
  margin-left: 12px;
  margin-top: 10px;
}
.editListHeaderItem:not(:last-child) {
  text-align: center;
}
</style>
